<template>
	<view class="mytask-page" :class="platform === 'ios' ? 'ios-page':''">
		<search :disabled="true" />
		<view class="tabs-bar">
			<tab ref="uTabs" @listenTabChange="listenTabChange" :current="current" />
		</view>
		<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
			<swiper-item class="swiper-item">
				<scroll-view scroll-y enable-back-to-top @scrolltolower="onreachBottom">
					<view class="list-page">
						<text class="tips">建议使用网页端编辑器完成稿件。编辑器稿件可显示进度，线下稿件只能显示为0%（未上传）或100%（已上传）</text>
						<view class="list-container">
							<template v-if="data_10_totalRow">
								<item v-for="(item, index) of data_10" :key="index" :data="item" />
								<u-loadmore v-if="data_10_isLoadAll" status="nomore" :load-text="{nomore: '没有更多了'}" />
							</template>
							<empty type="task" v-else />
						</view>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<scroll-view scroll-y enable-back-to-top @scrolltolower="onreachBottom">
					<view class="list-page">
						<view class="list-container">
							<template v-if="data_25_totalRow">
								<item v-for="(item, index) of data_25" type="item-ed" :key="index" :data="item" />
								<u-loadmore v-if="data_25_isLoadAll" status="nomore" :load-text="{nomore: '没有更多了'}" />
							</template>
							<empty type="task" v-else />
						</view>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<scroll-view scroll-y enable-back-to-top @scrolltolower="onreachBottom">
					<view class="list-page">
						<view class="list-container">
							<template v-if="data_21_totalRow">
								<item v-for="(item, index) of data_21" type="item-be" :key="index" :data="item" />
								<u-loadmore v-if="data_21_isLoadAll" status="nomore" :load-text="{nomore: '没有更多了'}" />
							</template>
							<empty type="task" v-else />
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
		<tab-bar></tab-bar>
	</view>
</template>
<script>
	import { myTask } from "@/api/task"
	import search from './components/search-bar'
	import tab from './components/tab'
	import item from './components/item'
	export default {
		components: {
			search,
			tab,
			item,
		},
		data (){
			return {
				current: 0,
				swiperCurrent: 0,
				data_10_page: 1,          // 进行中，第几页
				data_10: [],  			  // 进行中，dataList
				data_10_isLoadAll: false, // 是否加载完所有数据
				data_10_totalRow: 1,      // 总条数，默认1条数据，主要用于加载empty
				data_25_isFirst: true,    // 是否首次加载
				data_25_page: 1,
				data_25: [],
				data_25_isLoadAll: false,
				data_25_totalRow: 1,
				data_21_isFirst: true, 
				data_21_page: 1,
				data_21: [],
				data_21_isLoadAll: false,
				data_21_totalRow: 1,
				limit: 15,
				status: 10  // 10 进行中   25 已完成    21 退稿/终稿
			}
		},
		onLoad (){
			this.getPageData()
		},
		onPullDownRefresh (){
			// 下拉刷新数据，重置数据
			// 加载中，不再请求
			this.resetForPullDown();
			this.$refs.uTabs.getTotal();
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 1000)
		},
		methods: {
			// 加载数据
			getPageData (config = {}){
				config.page = config.page || 1;
				config.status = config.status || this.status;
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				myTask({
					jsonStr: JSON.stringify({
						"page":{
							"page": config.page,
							"limit": this.limit,
							"sort":"",
							"desc":""
						},
						"status": config.status
					})
				}).then(res => {
					if(res.success){
						const { data: {page, totalPage, totalRow, list} } = res;
						switch(config.status){
							case 10: {
								this.data_10 = Object.freeze(this.data_10.concat(list))
								this.data_10_totalRow = totalRow
								this.data_10_isLoadAll = (page === totalPage || totalPage === 0) // 判断最后一页
								break
							}
							case 25: {
								this.data_25 = Object.freeze(this.data_25.concat(list))
								this.data_25_totalRow = totalRow
								this.data_25_isLoadAll = (page === totalPage || totalPage === 0)
								break
							}
							case 21: {
								this.data_21 = Object.freeze(this.data_21.concat(list))
								this.data_21_totalRow = totalRow
								this.data_21_isLoadAll = (page === totalPage || totalPage === 0)
								break
							}
						}
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(err => {
					// 执行失败时， 页数减一，回到原来的值
					if(config.isBottom){
						switch(config.status){
							case 10: 
								this.data_10_page -= 1
								break
							case 25: 
								this.data_25_page -= 1
								break
							case 21: 
								this.data_21_page -= 1
								break
						}
					}
				}).finally(() => {
					uni.hideLoading()
				})
			},
			// 切换tab，重新加载数据
			firstChangeTabs (index){
				if(index === 1 && this.data_25_isFirst){
					this.getPageData({
						status: 25
					});
					this.data_25_isFirst = false
				}else if(index === 2 && this.data_21_isFirst){
					this.getPageData({
						status: 21
					});
					this.data_21_isFirst = false
				}
			},
			// scroll-view到底部加载更多
			onreachBottom(e) {
				// isLoadAll为true时, 表示已加载完毕数据, 不执行
				if(this.swiperCurrent === 0 && !this.data_10_isLoadAll){
					this.data_10_page += 1;
					this.getPageData({
						page: this.data_10_page
					})
				}else if(this.swiperCurrent === 1 && !this.data_25_isLoadAll){
					this.data_25_page += 1;
					this.getPageData({
						page: this.data_25_page,
						status: 25
					})
					
				}else if(this.swiperCurrent === 2 && !this.data_21_isLoadAll){
					this.data_21_page += 1;
					this.getPageData({
						page: this.data_21_page,
						status: 21
					})
				}
			},
			// 下拉刷新，重置数据
			resetForPullDown (){
				this.current = 0;
				this.swiperCurrent = 0;
				this.data_10_page = 1;
				this.data_25_page = 1;
				this.data_21_page = 1;
				this.data_10_totalRow = 1;
				this.data_25_totalRow = 1;
				this.data_21_totalRow = 1;
				this.data_10_isLoadAll = false;
				this.data_25_isLoadAll = false;
				this.data_21_isLoadAll = false;
				this.data_25_isFirst = true;
				this.data_21_isFirst = true;
				this.data_10 = [];
				this.data_25 = [];
				this.data_21 = [];
				this.getPageData()
			},
			// emit触发
			listenTabChange (res) {
				this.swiperCurrent = res;
				this.firstChangeTabs(res)
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.$children[0].setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.$children[0].setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
				this.firstChangeTabs(current)
			},
		}
	}
</script>
